<!--
*@Author: QWP
*@Description: 队伍和企业的详情
*@Date: 2024-11-04 16:24:07
-->
<template>
  <div class="u-team-firm-detial"
    :style="{
      'display': show ? 'block' : 'none',
      'width': type == 'team' ? '420px' : '700px'
    }"
    :class="{'u-firm-detial-detial': type == 'firm'}">
    <a-row justify="end">
      <u-icon-font type="icon-a-tuihui1" style="color: rgba(0, 0, 0, 0.45); cursor: pointer"
        @click="emits('close')"/>
    </a-row>

    <!-- 队伍和企业的基本信息 -->
    <a-row :gutter="16" class="f-w-100">
      <a-col v-for="item in (showEls[type] || [])"
        :span="item.span">
        <a-row class="u-row-item-detial">
          <a-col style="width: 80px">
            <b>{{ item.label }}:</b>
          </a-col>
          <a-col flex="1">
            {{ data[item.key] }}
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <!-- 风险信息 -->
    <div style="height: auto;"
      class="u-firm-warn-table"
      v-if="type == 'firm'">
      <WarningDispose :params="data" 
        :showTitle="false"
        ref="WarningDisposeRef"
        :open="show"
        :noView="true"
        style="display: none"
        @callBack="getWarnCallBack"/>

        <a-table
          :columns="columns1"
          :pagination="pagenation"
          :scroll="{ y: 200 }"
          :data-source="warnDData"
          :loading="warnLoading"
          size="small"
          :bordered="$attrs['bordered'] || false"
          rowKey="keyid"
          @change="warnTabChange"
          v-if="refreshTab">
        </a-table>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, watch, nextTick, h } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { formatWarnLevel } from '@/views/oa/warning/sumWarning/utils.ts'
import WarningDispose from '@/views/oa/warning/sumWarning/WarningDisposeF.vue'

const props = defineProps<{
  show: boolean,
  data: object,
  type: 'team' | 'firm'
}>()
const emits = defineEmits(['close'])

const showEls = {
  'team': [
    { label: '队伍名称', key: 'TEAM_NAME', span: 24 },
    { label: '部队类别', key: 'TEAM_TYPE', span: 24 },
    { label: '队伍隶属', key: 'TEAM_SUBJECTION', span: 24 },
    { label: '队伍性质', key: 'TEAM_NATURE', span: 24 },
    { label: '队伍能力类型', key: 'ABILITY_TYPE', span: 24 },
    { label: '地址', key: 'ADDRESS', span: 24 },
    { label: '主要负责人姓名', key: 'RESPONSIBLE_NAME', span: 24 },
    { label: '联系电话', key: 'RESPONSIBLE_TEL', span: 24 },
  ],
  'firm': [
    { label: '企业名称', key: 'companyName', span: 24 },
    { label: '企业类型', key: 'companyType', span: 24 },
  ]
}

const WarningDisposeRef = ref()
const warnLoading = ref<boolean>(false)
const refreshTab = ref<boolean>(true)
let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`
})
const columns = computed(() => {
  return WarningDisposeRef.value ? WarningDisposeRef.value['columns'] : []
})
let columns1: Array<_IColumnProps> = reactive([
  { dataIndex: "index", title: "序号", width: 50, align: 'center',
    customRender: ({ index }) => index += 1
  },
  { dataIndex: "warnType", title: "预警类型", width: 80 },
  { dataIndex: "warnSource", title: "预警来源", width: 80, ellipsis: true, },
  { dataIndex: "deviceContent", title: "传感器预警内容", width: 150, ellipsis: true, },
  { dataIndex: "personContent", title: "人员预警内容", width: 150, ellipsis: true, },
  { dataIndex: "warnLevel", title: "预警等级", width: 100, align: 'center',
    customRender: ({ text }) => {
      const text1 = {
        '一级': '1', '二级': '2', '三级': '3', '四级': '4'
      }
      return text ? formatWarnLevel(text1[text]) : ''
    }
  },
  { dataIndex: "warnDate", title: "预警开始时间 ", width: 150, align: 'center' },
  { dataIndex: "fkInfo", title: "企业反馈情况", width: 120 },
])
const warnOriginData = ref<any[]>([])
const warnDData = ref<any[]>([])

// 获取风险信息
const getWarnCallBack = (data1) => {
  warnLoading.value = false
  pagenation.total = data1.total;
  warnOriginData.value = data1.records
  warnDData.value = warnOriginData.value.slice(0, pagenation.pageSize);
}

// 分页显示
const warnTabChange = (pagination, filters, sorter, { action, currentDataSource }) => {
  pagenation.current = pagination.current
  pagenation.pageSize = pagination.pageSize

  WarningDisposeRef.value.pagenation.current = pagination.current
  WarningDisposeRef.value.pagenation.pageSize = pagination.pageSize
  WarningDisposeRef.value.getInfo()
}


watch(() => props.data, (nval, oval) => {
  if(props.show == true && Object.keys(nval || {}).length != 0 && props.type == 'firm') {
    setTimeout(() => {
      if(WarningDisposeRef.value) {
        warnLoading.value = true;
        WarningDisposeRef.value.getInfo()
      }
    }, 100)
  }
}, { immediate: true, deep: true})

</script>

<style lang='scss' scoped>
.u-team-firm-detial {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  padding: 20px;
  width: 400px;
  background: linear-gradient( 169deg, rgba(199,228,255,0.9) 0%, rgba(249,252,255,0.9) 100%);
  border-radius: 16px 16px 16px 16px;
  border: 2px solid #FFFFFF;
  z-index: 100;
  .u-row-item-detial {
    margin-bottom: 6px
  }
}
.u-firm-detial-detial {
  transform: unset;
}
.u-firm-warn-table {
  box-shadow: 0 0 10px 10px #ade1ff;
  table {
    border-color: #999;
    td, th {
      padding: 4px
    }
  }
}
</style>